<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript Demo</title>
    <style>
        body {
            padding-left: 50px;
        }

        .box {
            border: 2px solid gray;
            width: 500px;
            height: 300px;
            position: relative;
            top: 230px;
        }

        #img {
            position: absolute;
            width: 400px;
            top: 57px;
            left: 110px;
        }
    </style>
    <script>
        window.onload = function () {
            alert('闯关成功！')
            // out -- > in
            //1.选中图片, 选择盒子
            var img = document.getElementById('img')
            var box = document.getElementsByClassName('box')[0]
            //2 把图片放入盒子
            box.appendChild(img)
            //3. 把图片换成in.png
            img.setAttribute('src', './imgs/in.png')

            // in -- > out
            // 把图片放到盒子外面
            var body = document.querySelector('body')
            body.insertBefore(img, box)
        }
    </script>
</head>

<body>
    <p>
        <button id="btn">我又跳出来了</button>
    </p>
    <img id="img" src="imgs/out.png">
    <div class="box">
    </div>
</body>

</html>